import React, { Component } from "react";
import { fromJS } from "immutable";
import { Button } from "antd";
export default class App extends Component {
  state = {
    info: fromJS({
      name: "lzq1",
      location: { province: "四川", city: "成都" },
      favor: ["摄影", "做饭", "看科幻电影"],
    }),
  };
  render() {
    return (
      <div>
        <h1>个人信息修改</h1>
        <Button
          onClick={() => {
            this.setState({
              info: this.state.info
                .setIn(["name"], "廖子乔")
                .setIn(["location", "city"], "杭州")
                .setIn(["location", "province"], "浙江"),
            });
          }}
        >
          点击修改
        </Button>
        <div>
          {this.state.info.get("name")}
          <br />
          {this.state.info.get("location").get("province")}--
          {this.state.info.get("location").get("city")}
        </div>
        <br />
        <h2>个人爱好</h2>
        <div>
          {this.state.info.get("favor").map((item, index) => (
            <li key={index} style={{ marginTop: "5px" }}>
              {item}{" "}
              <Button
                type="primary"
                onClick={(index) => {
                  this.setState({
                    info: this.state.info.updateIn(["favor"], (list) =>
                      list.splice(index, 1)
                    ),
                  });
                }}
              >
                删除
              </Button>
            </li>
          ))}
        </div>
      </div>
    );
  }
}
